<template>
  <div>
  <!-- 组件1 教师管理 --> 
  <MyName></MyName>
  <!-- 组件2 搜索 -->
  <MySeach @parentsearch="parentSearch"></MySeach>
  <!-- 组件3 表格 --> 
  <MyTable :myarr="arr" @resetTable="initHome" @opendialog="parentupdatedialog"></MyTable>
  <!-- 组件4 分页 -->
  <MyPage  @changePageSize="parentpagesize" @changePage="parentpage" :page="page" :pageSize="pageSize" :total="total"></MyPage>
  <!-- 组件5 编辑弹框 -->
  <Dialog :dialogType="dialogType" :row="row" @resettable="resettable" @closedialog="show=false"  v-if="show"></Dialog>

  </div>
</template>

<script> 
import MySeach from './components/MySearch.vue'
import MyTable from './components/MyTable.vue'
import MyPage from './components/MyPage.vue'
import MyName from './components/MyName.vue'
import Dialog from './components/Dialog.vue'
import { getHomeApi } from '../../api/homeApi'
export default{
  components:{
    MySeach,
    MyTable,
    MyPage,
    MyName,
    Dialog,
  },
  data(){
    return{
       arr:[],
       keyword:'',//搜索关键词
       page:1,//默认当前页 是第一页
       pageSize:10,//默认每页显示10条
       total:0,//总条数
       show:false,//控制弹框
       row:{},//修改的弹框数据
       dialogType:0 //0添加的框  1修改的弹框 
    }
  },
  mounted(){
    // 发送我们的请求，数组是共享数据，我们要把写在父组件中。
    this.initHome()
  },
  methods:{
    parentupdatedialog(row){
      // 编辑打开弹框  并且传递数据
      this.row = row
      this.dialogType = 1
      this.show = true
    },
    resettable(){
      // 刷新表格 关闭弹框
      this.initHome()
      this.show = false
    },
    parentSearch(val){//子组件触发父组件 传参   {\"name\":123}
      this.keyword = val
      this.initHome()
    },
    parentpagesize(val){//切换pagesize事件
      this.pageSize = val
      this.page = 1
      this.initHome()
    },
    parentpage(val){//切换页码事件
      this.page = val
      this.initHome()
    },
    // 首屏查询接口，一般跟搜索是共用一个接口的
    // 首屏查询接口，一般跟我们分页器也是绑定的关系  我们只需要加俩字段就可以
    // 支持分页  page当前页 pageSize一页多少条
    initHome(){
       var params = { 
          keyword:this.keyword,
          page:this.page,
          pageSize:this.pageSize
         }
       getHomeApi(params).then(res=>{
        //  console.log(res);
         if(res.code == 200){
           this.arr = res.data
           this.total = res.total
         }
       })
    }
  }
}
</script>

<style>

</style>